<style>
.placeholder { color:#cdcdcd;}
</style>
<script src="/js/jquery.placeholder.js" type="text/javascript"></script>
<!-- banner start -->
<div id="forgot_banner" >
    <!-- Login Popup Start -->
    <div class="register-box forgot-box" id="forgot-box">
        <div class="register-contbox forgot-contbox" style="height:320px !important">
            <form action="" name="login" id="login" method="post">
				<?if(!isset($_GET['token'])){?>
					<h1>Change Password? <a href="/my-profile" id="close_button"></a></h1>
				<?}else{?>
					<h1>Change Password? <a href="/" id="close_button"></a></h1>
				<?}?>
                <div class="log-fld" style="border-bottom:0px;">
		            <!--<div id="txt">Enter your email to reset your password:</div>-->
                    <div class="log-bx">
						<?if(isset($_GET['token'])){?>
							<div class="log-lftbx" style="width:30%;">Old Password<span>*</span></div>
							<div class="log-rhtbx" style="width:65%;">
								<input type="password" value="" name="oldpwd" id="oldpwd" placeholder="Enter your old password" style="width:90%;margin-bottom:20px; margin-left:7%;">                            
							</div>
							<span style="color:red;width:60%; margin-left:35%; float:left; margin-top:-20px; margin-bottom:10px;">(You got a password in your email)</span>
						<?}else{?>
							<div class="log-lftbx" style="width:30%;">Old Password<span>*</span></div>
							<div class="log-rhtbx" style="width:65%;">
                            <input type="password" value="" name="oldpwd" id="oldpwd" placeholder="Enter your old password" style="width:90%;margin-bottom:20px; margin-left:7%;">                            
                        </div>
						<?}?>                        
                        <div class="clearfix"></div>
						<div class="log-lftbx" style="width:30%;">New Password<span>*</span></div>
                        <div class="log-rhtbx" style="width:65%;">
                            <input type="password" value="" name="newpwd" id="newpwd" placeholder="Enter your New Password" style="width:90%;margin-bottom:20px; margin-left:7%;">
                            
                        </div><div class="clearfix"></div>
						<div class="log-lftbx" style="width:35%;">Confirm Password<span>*</span></div>
                        <div class="log-rhtbx" style="width:65%;">
                            <input type="password" value="" name="confirm-pwd" id="confirm-pwd" placeholder="Enter your Confirm password" style="width:89%;">
                            
                        </div>						
                    </div>
                    <div class="log-butbg">
	                    <a id="hide_onclick" href="javascript:void(0);" onClick="return changePassword();"><img id="hide_change" src="/images/Home-Login_Forgot_Password/button_reset.png" class="logbt"></a>
    	            <span class="valid-error" id="confirmerrormsg"style="width:50%;margin-left:9%;margin-top:-5%;"></span>
					<span class="valid-error" id="successmesg"style="width:50%;margin-left:9%;margin-top:-4%;color:green"></span>
					</div>					
					<div class="clearfix"></div>
        	        <!--<div style="border-bottom:1px solid #F1F2F6;clear:both;margin:0;padding:0;"></div>           -->     
			    </div>
            </form>
        </div>
    </div>
    <!-- Login Popup End -->    
</div><br/><br/>
<!-- banner end-->

<!-- container start -->
<div id="home-container">
	<div id="hcontainer">
    <ul>
        <!--<a href="#"><li><span class="board"></span>Solved Board <br/>Papers</li></a>-->
        <a href="#"><li><span class="learning"></span>Extramarks<br/>Learning Materials</li></a>
        <a href="#"><li><span class="blog"></span>Extramarks<br/>Blog</li></a>
        <a href="#"><li><span class="school"></span>&nbsp;&nbsp;School<br/>&nbsp;&nbsp;Solutions</li></a>
    </ul>
</div>

</div>
<div class="clearfix"></div>
<!-- container end-->
<!--End-->
<script>
	function changePassword(){			
		var flag=true;
		<? if(isset($_GET['id'])){
			$id=$_GET['id'];
			$url='/';
		}else{
			$id=$_GET['userId'];
			$url='/my-profile';
		}?>
		var userId='<?echo $id;?>';
		var oldpasswrd=$("#oldpwd").val();		
		var passwrd=$("#newpwd").val();
		var cnfpwrd=$("#confirm-pwd").val();		
		if(cnfpwrd==""){
			$("#confirmerrormsg").css('display','block');
			$("#confirmerrormsg").html('Please enter confirm password!');
			flag=false;
			$("#newpwd").focus();
		}
		if(passwrd==""){
			$("#confirmerrormsg").css('display','block');
			$("#confirmerrormsg").html('Please enter your new password!');
			flag=false;
			$("#newpwd").focus();
		}
		if(oldpasswrd==""){
			$("#confirmerrormsg").css('display','block');
			$("#confirmerrormsg").html('Please enter your old password!');
			flag=false;
			$("#oldpwd").focus();
		}	
		if(flag==false){ 
				return false;
		}else{			
			if(passwrd==cnfpwrd){
				$("#hide_change").removeClass("logbt");
				$("#hide_onclick").removeAttr("onclick");	
				$.ajax({
					type:'POST',
					url:   '/user/check-password',
					data:{oldpasswrd:oldpasswrd,userId:userId},
					success: function(data){
						if(data.output=='success'){	
							$.ajax({
								type:'POST',
								url:   '/user/change-password',
								data:{cnfpwrd:cnfpwrd,userId:userId},
								success: function(data){
									$("#confirmerrormsg").css('display','none');
									$("#successmesg").css('display','block');
									$("#successmesg").html('Successful to change your password');
									window.location='<?echo $url;?>';
								}
							});					
						}else{
							$("#confirmerrormsg").css('display','block');
							$("#confirmerrormsg").html('You entered old password is wrong');
						}
					}
				});					
			}else{
				$("#confirmerrormsg").css('display','block');
				$("#confirmerrormsg").html('Your confirm password do not match to new password!');
				$("#confirm-pwd").focus();
			}
		}		
	}	
</script>